<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃鸡</title>
    <style type="text/css">
        #battle-div {
            /*border: 1px solid red;*/
            width: 70%;
        }
        #battle-ground {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>大吉大利，今晚吃鸡。</h1>
    <div id="battle-div">
        <canvas id="battle-ground" width="1000px" height="600px"></canvas>
    </div>
</body>
</html>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script type="text/javascript">
    var ctx = document.getElementById('battle-ground').getContext('2d');
    ctx.font = '18px';

    function draw(data) {
        ctx.clearRect(0, 0, 1000, 600);

        var area = data.area;
        ctx.strokeStyle = '#107ed8';
        ctx.strokeRect(area.startX, area.startY, area.endX - area.startX, area.endY - area.startY);

        _.each(data.users, function (user) {
            if(user.alive) {
                ctx.fillStyle = user.color;
            }else {
                ctx.fillStyle = 'gray';
            }
            ctx.fillRect(user.x, user.y, 20, 20);
            ctx.fillStyle = "black";
            ctx.fillText(user.name, user.x - 5, user.y - 5);

            if(!user.alive) {
                ctx.strokeStyle = "red";
                ctx.beginPath();
                ctx.moveTo(user.x, user.y);
                ctx.lineTo(user.x+20, user.y+20);
                ctx.moveTo(user.x+20, user.y);
                ctx.lineTo(user.x, user.y+20);
                ctx.stroke();
                ctx.closePath();
            }
        });

        _.each(data.bullets, function (bullet) {
            ctx.fillStyle = bullet.color;
            ctx.beginPath();
            ctx.arc(bullet.x, bullet.y, 3, 0, 2 * Math.PI);
            ctx.fill();
            ctx.closePath();
        });
    }


    var socket = io('ws://localhost:8008');
    socket.on('connect', function () {

    });

    socket.on('info', function (info) {
        console.log(info);
        draw(info);
        window.info = info;
    });

//    let x = 500, y = 300;
//    let step = 10, angle = Math.PI/4;
//    setInterval(function () {
//        x += Math.sin(angle) * step;
//        y += ((angle<Math.PI/2 || angle>Math.PI*3/2)?-1:1) * Math.cos(angle) * step;
//        draw({
//            area: {startX: 30, startY:30, endX: 940, endY: 540},
//            users: [
//                {name: '111', color: 'red', x: 400, y: 500, alive: true},
//                {name: '222', color: 'blue', x: 40, y: 50, alive: true},
//                {name: '333', color: 'green', x: 140, y: 150, alive: true},
//                {name: '444', color: 'yellow', x: 800, y: 500, alive: false},
//            ],
//            bullets: [
//                {owner: '1', x: x, y: y, startX: 200, startY: 300, angle: Math.PI},
//                {owner: '2', x: 1000*Math.random(), y: 600*Math.random(), startX: 200, startY: 300, angle: Math.PI},
//                {owner: '3', x: 1000*Math.random(), y: 600*Math.random(), startX: 200, startY: 300, angle: Math.PI},
//            ]
//        });
//    }, 200);
    function start() {
        socket.emit('start', 'ok');
    };

    function stop() {
        socket.emit('stop', 'ok');
    };

    function action() {
        socket.emit('action', 'ok');
    };
</script>